<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/serverUrl.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				text-align: center;
			}

			.main {
				margin-top: 40%;
			}

			.logo {
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>

		<!-- 登陆卡片 -->
		<div class="mui-content mui-card main">
			<p>
				<img class="logo" src="./img/pc.png">
			</p>
			<div class="mui-input-group">
				<div class="mui-input-row">
					<label>用户名</label>
					<input type="text" id="account" class="mui-input-clear" placeholder="请输入用户名">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input type="password" id="password" class="mui-input-password" placeholder="请输入密码">
				</div>
				<br />
				<div class="mui-button-row">
					<button type="button" id="login" class="mui-btn mui-btn-primary">&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;</button>
					<button type="button" id="register" class="mui-btn mui-btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;注册&nbsp;&nbsp;&nbsp;&nbsp;</button>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		mui.plusReady(function() {
			// 首先使用本地保存的账号和密码自动登录
			$.ajax({
				//请求方式
				type: "POST",
				dataType: "json",
				url: serverUrl + "login",
				data: {
					userName: localStorage.getItem("account"),
					password: localStorage.getItem("password")
				},
				//请求成功
				success: function(data) {
					if (data == "error") {
						
					} else {
						// 判断是学生还是老师账户，将信息保存到本地
						if (data == "student") {
							localStorage.setItem("teacher","false");
						} else if(data == "teacher"){
							localStorage.setItem("teacher","true");
						}
						// 跳转到主页
						var self = plus.webview.currentWebview();
						var mainpage = plus.webview.create("./index.html");
						self.append(mainpage); /* 追加到主页面 */
					}
				}
			});
			// 点击登录按钮
			document.getElementById("login").addEventListener("tap", function() {
				var account = document.getElementById("account").value;
				var password = document.getElementById("password").value;
				$.ajax({
					//请求方式
					type: "POST",
					dataType: "json",
					url: serverUrl + "login",
					data: {
						userName: account,
						password: password
					},
					//请求成功
					success: function(data) {
						if (data == "error") {
							mui.toast("请输入正确的账号或密码！");
						} else {
							// 判断是学生还是老师账户，将信息保存到本地
							if (data == "student") {
								localStorage.setItem("teacher","false");
							} else if(data == "teacher"){
								localStorage.setItem("teacher","true");
							}
							// 将账号和密码保存到本地
							localStorage.setItem("account", account);
							localStorage.setItem("password", password);
							// 跳转到主页
							var self = plus.webview.currentWebview();
							var mainpage = plus.webview.create("./index.html");
							self.append(mainpage); /* 追加到主页面 */
						}
					},
					//请求失败，包含具体的错误信息
					error: function(e) {
						mui.toast("遇到了未知错误！");
					}
				});
			});
		});

		// 注册按钮点击事件
		document.getElementById("register").addEventListener("tap", function() {
			mui.openWindow({
				url: "./register.html",
				creatNew: false,
				show: {
					autoShow: true,
					aniShow: "slide-in-right",
					duration: 100
				}
			});
		});
	</script>
</html>
